<template>
    <div class="month">
        <div class="export-setting">
            <h3>导出设置</h3>
            <div class="time-setting">
                <div class="title">
                    选择时间范围: &nbsp;&nbsp;&nbsp;
                    <el-date-picker 
                        style="width:320px" 
                        v-model="monthTime" 
                        size="mini" 
                        type="month" 
                        value-format="yyyy-MM"
                        placeholder="选择月份"
                        :picker-options="pickerOptions" 
                        @change="monthChange"
                    ></el-date-picker>
                </div>
            </div>

            <div class="record-info">
                共计 <span>{{total}}</span> 条记录，支持导出格式为：pdf
            </div>

            <div class="export-btn">
                <el-button 
                type="primary" 
                @click="exportClick" 
                size="small" 
                :disabled="loading"
                v-czc="['数据报表', '点击按钮' , '导出月报', 0 ,'dataExport-btn-exportMonth']"
                >
                    导出
                </el-button>
            </div>

        </div>

        <div class="export-footer">
            <h3>导出内容示例</h3>
            <img src="/images/tool/month.jpg" alt="" />
        </div>

    </div>
</template>

<script>
import { mapActions } from 'vuex';
import dialogWaitList from '@js/dialog-wait-list.js';
import tool from '../mixins/tool';

export default {
    head: {},
    mixins: [tool],
    components: {},
    props:{
        typeName: {
            type: String,
            default: ""
        },
        num: {
            type: [String,Number],
            default: 0
        },
        unit:{
            type: String,
            default: "条"
        },
        code:{
            type: String,
            default: ""
        },
    },
    data() {
        return {
            loading:false,
            
            monthTime: '', //清空这个
            pickerOptions: {
                disabledDate(time) {
                    let jend = '2016-09-24 00:00';
                    let cTime = new Date(jend).getTime(); //转化为时间戳
                    // let newTime = new Date().getTime(); //当前时间的时间戳
                    // const timestamp = newTime-cTime;
                    // return time.getTime() > new Date().getTime() || time.getTime() < new Date().getTime() - timestamp;
                    return time.getTime() > Date.now()|| time.getTime() < cTime;
                },
            },
            total: 0,
        };
    },
    computed: {},
    watch: {
        monthTime: function (n, o) {
            if (!!n) {
                this.getList();
            } else {
                this.total = 0;
            }
        },
    },

    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        monthChange: function () {},

        getList: function () {
            this.loading = true;
            this.$get(
                `${this.$store.state.api.tbUrl}/dateExport/projectMonthly`,
                {
                    month: this.monthTime,
                    isExport: false,
                },
                function (data) {
                    this.total = data.total;
                    this.loading = false;
                }
            );
        },

        exportData(){
            if (!this.monthTime) {
                return ShowMsg('选择月份后进行导出', 'warning');
            }
            if (this.total == 0) {
                return ShowMsg('共计 0 条记录,暂不支持导出', 'warning');
            }

            ShowConfirm('是否导出当前数据信息', 'warning', () => {
                var search = toSearch({
                    month: this.monthTime,
                    isExport: true,
                });

                downloader(`${this.$store.state.api.tbUrl}/dateExport/projectMonthly${search}`);

                this.useNums('YB');

                return ShowMsgBox('导出成功，即将自动下载附件，请勿关闭页面', 'success');
            });
        },
    },
    created() {},
    mounted() {
        // 获取服务权限次数
        this.queryStatisticData(arr => {
            var service = arr.filter(item => item.code === 'YB'),
                remain = service[0].surplus;

            if (remain <= 0 || !remain) {
                // 没次数
                return;
            }

            // 在列队中注册-分享引导登录
            dialogWaitList.push(() => {
                this.$alert(`您有${remain}次导出月报的次数，点击导出只消耗1次`, '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                }).then(() => {
                    dialogWaitList.next();
                });
            }, 4);

            
        });
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.month {
    .re-span{
        font-size: 14px;
        color: #999
    }

    .export-setting {
        margin-top: 15px;

        .time-setting {
            margin-top: 20px;
            font-weight: 600;

            .el-date-editor {
                width: 400px;
            }
        }
        .record-info {
            margin-top: 1em;
            font-size: 12px;
        }
        .export-btn {
            display: flex;
            justify-content: center;
            margin-top: 80px;
            margin-bottom: 40px;

            .el-button {
                width: 105px;
            }
        }
    }

    .export-footer {
        margin-top: 20px;

        img {
            display: block;
            width: 50%;
            margin: 15px auto 0;
        }
    }
}
</style>
